<template>
  <div>
    <el-dialog :title="info.title"
               :visible.sync="info.show"
               @closed="closed"
               @open="open"
               @opened="opened"
               style="padding:0;"
               v-dialogDrag
               v-el-drag-dialog
               width="60%">
      <div>
        <img :src="file.src" style="width: 100%;" v-if="type === 'img'"/>
        <div v-if="type === 'pdf'">
          <pdf :key="i" :page="i" :src="file.src" style="width: 100%;" v-for="i in file.pdfTotal"></pdf>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: 'fileView',
  data() {
    return {
      file: {
        src: ''
      },
      type: ''
    }
  },
  components: {pdf},
  props: {
    info: {
      type: Object,
      required: true
    },
    fileType: {
      type: String,
      required: true
    }
  },
  methods: {
    open() {
      this.file = {
        src: ''
      }
      if (this.fileType === 'img') {
        this.type = this.fileType
        this.file = this.info.file
      }
    },
    opened() {
      if (this.fileType === 'pdf') {
        this.type = this.fileType
        this.file = this.info.file
      }
    },
    closed() {
      if (this.type === 'pdf') {
        this.file.src = pdf.createLoadingTask(this.file.array)
        this.file.src.promise.then(pdf => {
          this.file.pdfTotal = pdf.numPages
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
